<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10背景2</title>
    <style>
        .box1{

            width: 500px;
            height: 500px;
            overflow: scroll;
            border: 10px rebeccapurple double;
            padding: 10px;
            background-color: #bfa;
            background-image: url(../exercise/img/01/02.jpg);
            background-repeat: no-repeat;
            background-clip:content-box;
            background-position: right bottom;
            /* background-origin: border-box; */
            background-size:;
            


        }
        .box2{
            height: 1000px;
            width: 200px;
            background-color: red;
            background-image: url(../exercise/img/01/02.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-clip: content-box;
            background-origin: padding-box;
        }
        .box3{
            width: 500px;
            height: 500px;
            border: 10px red double;
            padding: 18px;

            background: #bfa url(../exercise/img/01/02.jpg) no-repeat 
            top  left/80% auto content-box border-box
             ;
        }
        /* 
            background-clip设置背景范围
                可选值：
                    border-box 默认值
                    padding-box
                    content-box
            background-origin设置背景图片的偏移量的计算原点
                可选值：
                    border-box
                    padding-box 默认值
                    conten-box
            background-size 设置背景图片大小
                        第一个值宽度 
                        第二个值高度
                        只写一个值，第二个个值auto

                        cover 图片比例不变 将元素铺满
                        contain 图片比例不变，在元素内完整显示
            

            background-color
            background-image  url()
            background-repeat  repeat repeat-x repeat-y no-repeat
            background-position top left bottom right center 具体像素值
            background-origin  border-box padding-box conten-box

            background-clip  border-box padding-box conten-box
            background-size  contain cover 具体像素值
            background-attachment fixed scroll
            background   origin之后再接clip  size一定在position后面 position/size 
        
        
        
        */


    </style>
</head>
<body>
    <!-- <div class="box1">
        <div class="box2">

        </div>


    </div> -->
    <div class="box3">

    </div>
    
</body>
</html>